<template>
	<view>
		<view class="">
			<view class='_header'></view>
			<view class="u-flex u-row-between u-col-center u-p-r-40">
				<view class="user u-p-l-40 u-p-r-40 u-flex u-row-left u-col-center" @click="loginClick">
					<image class="avatar" :src="(userInfo&&userInfo.icon)?userInfo.icon:'/static/avatar.png'"></image>
					<view class="u-p-l-20">
						<view class="name u-font-18">{{userInfo&&userInfo.uid?(userInfo.nick?userInfo.nick:userInfo.uid):'登录/注册'}}</view>
						<view class="addr u-light-color u-p-t-10 u-font-12">点击登陆或者设置个性昵称和头像~</view>
					</view>
				</view>
				<!-- <view class="" style="margin-top: 100rpx;"  @click="exitClick">
					<u-icon name="/static/icon/exit.png" size="56"></u-icon>
				</view> -->
			</view>
			<view class="jifen u-flex u-row-left u-p-l-30 u-p-r-30 u-m-t-50">
				<view class="tab u-flex-col u-row-center u-col-center u-p-t-40 u-p-b-40 border-box" hover-class="hover-class" hover-stay-time="50">
					<view class="icon u-flex u-row-center u-col-center">
						<image src="/static/icon/user1.png"></image>
					</view>
					<view class="title u-main-color u-p-t-10 u-font-12">邀请好友</view>
					<view class="cont u-light-color u-p-t-10 u-font-12">+{{inviteIntegral}}积分/位</view>
					<button open-type="share" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;"></button>
				</view>
				<view class="tab u-flex-col u-row-center u-col-center u-p-t-40 u-p-b-40 border-box" :class="userInfo&&userInfo.isSign?'border-box-disabled':''" hover-class="hover-class" hover-stay-time="50" @click="signClick">
					<view class="icon u-flex u-row-center u-col-center" :class="userInfo&&userInfo.isSign?'icons':''">
						<image src="/static/icon/sign.png"></image>
					</view>
					<view class="title u-main-color u-p-t-10 u-font-12">每日签到</view>
					<view class="cont u-light-color u-p-t-10 u-font-12">+{{signIntegral}}积分/天</view>
				</view>
				<view class="tab u-flex-col u-row-center u-col-center u-p-t-40 u-p-b-40 border-box" hover-class="hover-class" hover-stay-time="50" @click="adClick">
					<view class="icon u-flex u-row-center u-col-center">
						<image src="/static/icon/video.png"></image>
					</view>
					<view class="title u-main-color u-p-t-10 u-font-12">赚取积分</view>
					<view class="cont u-light-color u-p-t-10 u-font-12">+{{adIntegral}}积分/次</view>
				</view>
			</view>
			<view class="menu u-m-l-40 u-m-r-40 u-m-t-40 border-box">
				<view class="u-flex u-row-between u-p-30" hover-class="hover-class1" hover-stay-time="50" @click="recordClick">
					<view class="u-flex u-row-left">
						<view class="">我的积分</view>
					</view>
					<view class="u-flex u-row-right">
						<view class="u-light-color u-font-12 u-p-r-10">{{userInfo?userInfo.integral:0}}积分</view>
						<view class="arror-right"></view>
					</view>
				</view>
				
			</view>
			<view class="adContainer u-m-40" v-if="wxVideoAdIds && wxVideoAdIds.length">
				<!-- #ifdef MP-WEIXIN -->
				<ad :unit-id="wxVideoAdIds[Math.floor(Math.random() * wxVideoAdIds.length + 1) - 1]" ad-type="video" ad-theme="white"></ad>
				<!-- #endif -->
			</view>
			<view class="menu u-m-l-40 u-m-r-40 u-m-t-40 border-box">
				<!-- #ifndef MP-QQ -->
				<view class="u-flex u-row-between u-p-30 border-bottom" style="position: relative;" hover-class="hover-class1" hover-stay-time="50">
					<view class="u-flex u-row-left">
						<view class="">联系客服</view>
					</view>
					<view class="u-flex u-row-right">
						<view class="arror-right"></view>
					</view>
					<button open-type="contact" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;"></button>
				</view>
				<!-- #endif -->
			</view>
			<view class="quit u-text-center u-p-t-40" v-if="userInfo&&userInfo.uid" @click="exitClick">退出登录</view>
			<view class="" style="height: 180rpx;"></view>
		</view>
		<models v-if="loginShow"
		:ad="true"
		title="为了更好的玩机体验，快去授权登录吧"
		btnText="授权登录" 
		@save="getUserInfo" 
		@close="loginShow = false"></models>
		
		<models v-if="signShow"
		:authorize="false" 
		:ad="true"
		:title="signTitle"
		btnText="知道了" 
		closeText=" " 
		@save="signShow = false"></models>
		
		<wxLogin ref="wxLogin" @submit="submitLogin"></wxLogin>

		<u-top-tips ref="uTips" ></u-top-tips>
	</view>
</template>

<script>
	let videoAd = null;

	const globalData = getApp().globalData;
	import models from '@/components/model/model.vue'
	import wxLogin from '@/components/wxLogin/wxLogin.vue'
	export default {
		components:{
			models,
			wxLogin
		},
		data() {
			return {
				loadShow: true,
				// 签到
				isSign: false,
				signShow: false,
				signTitle: '',
				signIntegral: 0,
				inviteIntegral: 0,
				adIntegral: 0,
				userInfo:null,
				wxVideoAdIds:null,

				// 登录弹窗
				loginShow: false,
			}
		},
		async onLoad(){
			this.getConfig();
		},
		async onShow(){
			let that = this;
			that.userInfo = this.getLoginUserInfo();
		},
		methods: {
			loginClick(){
				var that = this
				if(!that.userInfo){
					that.loginShow = true;
				}else{
					that.$refs.wxLogin.open();
				}
			},
			signClick(){
				this.$refs.uTips.show({title: '模板功能，仅供参考！',type: 'error',duration: '1500'});
			},
			recordClick(){
				this.$refs.uTips.show({title: '模板功能，仅供参考！',type: 'error',duration: '1500'});
			},
			exitClick(){
				uni.removeStorageSync('USERINFO');
				this.userInfo = null;
				// 登陆提示弹出层
				this.$refs.uTips.show({title:'退出登陆成功',type: 'success',duration: '2300'});
			},
			getConfig(){
				this.signIntegral = 1;
				this.inviteIntegral = 1;
				this.adIntegral = 1;
			},
			adClick(){
				this.$refs.uTips.show({title: '模板功能，仅供参考！',type: 'error',duration: '1500'});
			},
			// 登录
			getUserInfo(){
				this.wxloginres();
				return false;
				var that = this;
				that.loginShow = false;
				uni.getProvider({
					service: 'oauth',
					success: function (res) {
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								scopes:'auth_user',
								success: function (loginRes) {
									that.wxloginres(loginRes.code);
								}
							});
						}
					}
				});
			},
			submitLogin(e){
				console.log(e);
				if(!e){
					this.userInfo = this.getLoginUserInfo();
				}else{
					if(e.name){
						this.$refs.uTips.show({title:'操作成功',type: 'success',duration: '1500'});
						this.userInfo.nick = e.name;
						this.userInfo.icon = e.avatar;
						this.$forceUpdate();
					}
				}
			},
			//登录后提交服务器获取进一步信息
			wxloginres(code) {
				this.loginShow = false;
				this.$refs.wxLogin.open();
				return false;
			}
		},
		onShareAppMessage(res) {
			let uid = this.userInfo?this.userInfo.uid:0;
			return {
				title: '我正在使用'+globalData.appName+',ai问答,ai绘画...它帮我解决了日常生活中的很多问题,你也快来试试吧~',
				imageUrl: '/static/logo.png',
				path: '/pages/index/index?pid='+uid
			}
		},
		onShareTimeline(res) {
			let uid = this.userInfo?this.userInfo.uid:0;
			return {
				title: '我正在使用'+globalData.appName+',ai问答,ai绘画...它帮我解决了日常生活中的很多问题,你也快来试试吧~',
				imageUrl: '/static/logo.png',
				path: '/pages/index/index?pid='+uid
			}
		}
	}
</script>

<style lang="scss">
	._header{
		height: calc(var(--status-bar-height) + 32rpx);
	}
	.user{
		.avatar{
			width: 116rpx;
			height: 116rpx;
			border-radius: 116rpx;
		}
		.name{
			font-size: 40rpx;
			font-weight: 500;
		}
	}
	.jifen{
		.tab{
			position: relative;
			background-color: #FFFFFF;
			width: 234rpx;
			margin-right: 10rpx;
			margin-left: 10rpx;
			.title{
				font-weight: 550;
			}
			.icon{
				width: 80rpx;
				height: 80rpx;
				border-radius: 80rpx;
				image{
					width: 46rpx;
					height: 46rpx;
				}
			}
		}
		.tab:nth-child(1) .icon{
			background-image: linear-gradient(to bottom right, #8acfaf, #5FBB92, #8acfaf);
			margin-right: 10rpx;
		}
		.tab:nth-child(2) .icon{
			background-image: linear-gradient(to bottom right, #f0d35c, #F0B347, #f0d35c);
			margin-right: 10rpx;
		}
		.tab:nth-child(2) .icons{
			background-image: linear-gradient(to left top, #dadada , #dadada, #dadada);
		}
		.tab:nth-child(3) .icon{
			background-image: linear-gradient(to bottom right, #8c99de, #836AF0, #8c99de);
		}
	}
	.border-box{
		box-shadow: 0 0px 24px rgba(231, 231, 231, 0.65);
		border-radius: 16rpx;
	}
	.border-box-disabled{
		.title{
			opacity: 0.5;
		}
	}
	.menu{
		image{
			width: 38rpx;
			height: 38rpx;
		}
	}
	.border-bottom{
		border-bottom: 1rpx solid #F6F6F6;
	}
	.hover-class{
		transform:scale(0.95);
		transition: all 0.2s;
	}
	.hover-class1{
		background-color: #F8F8F8;
	}
	.arror-right{
		width: 15rpx;
		height: 15rpx;
		border-top: 3rpx solid #a9acb3;
		border-right: 3rpx solid #a9acb3;
		transform: rotate(45deg);
	}
	.quit{
		color: #fa6868;
	}
</style>
